<template>
  <div class="container-goods">
    <ul class="goods-list">
      <li class="list-item"
          v-for="(item, index) in goods_list"
          :key="index"
          @tap="doc_detail(item)">
        <div class="left">
          <!-- 项目图片 -->
          <div class="goods-logo">
            <img :src="img_url+item.thumb_image"
                 v-if="img_url&&item.thumb_image"
                 alt
                 class="img" />
          </div>
          <div class="tip"
               v-if="item.activity_status<3">
            {{item.activity_status==1?'即将开奖':''}}
            {{item.activity_status==2?'抢购中':''}}
          </div>
        </div>
        <div class="info">
          <div class="goods-name">
            <span v-if="item.cross_border == 1"
                  class="icon"></span>
            {{item.title}}
          </div>
          <p class="plus"
             v-if="item.plus_title&&item.plus_title!=''">
            {{item.plus_title}}
          </p>
          <div class="price">
            <div class="price-left">
              <span class="icon">￥</span>
              <span class="num">{{item.price}}</span>
            </div>
            <div class="price-right">销量{{item.sales_num}}</div>
          </div>

        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
      score: 4
    };
  },
  components: {},
  methods: {
    doc_detail (item) {
      wx.navigateTo({ url: "/pages/package_mall/goods_detail/main?goods_id=" + item.id });
    }
  },
  props: ["goods_list"],
  created () { }
};
</script>

<style lang="less" scoped>
.container-goods {
  .goods-list {
    .list-item {
      display: flex;
      padding: 10px 15px;
      background-color: #fff;
      border-bottom: 1px solid rgba(230, 230, 230, 1);
      position: relative;
      .left {
        width: 85px;
        height: 85px;
        position: relative;
        .goods-logo {
          width: 100%;
          height: 100%;
          .img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .tip {
          width: 48px;
          height: 20px;
          font-size: 10px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 20px;
          text-align: right;
          padding-right: 2px;
          position: absolute;
          bottom: 3px;
          right: 0;
          background-image: url("https://h5.ameimeika.com/mp_images/mp_2.4/search/goods-tip.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
      .info {
        flex: 1;
        padding-left: 10px;
        position: relative;
        .goods-name {
          font-size: 14px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          .icon {
            width: 40px;
            height: 14px;
            display: inline-block;
            background: url("https://img.ameimeika.com/h5_images/mp_images/mp_3.0/mall/kuajing.png")
              no-repeat;
            background-size: 100% 100%;
          }
        }
        .plus {
          float: left;
          padding: 0 5px;
          margin: 4px 0;
          line-height: 16px;
          font-size: 10px;
          font-family: "PingFangSC-Medium", "PingFang SC";
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.0.2/plus_bg%402x.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .price {
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          padding-left: 10px;
          .price-left {
            float: left;
            .icon {
              display: inline-block;
              font-size: 10px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(255, 56, 62, 1);
              line-height: 14px;
              vertical-align: bottom;
            }
            .num {
              font-size: 16px;
              font-family: "STHeitiTC-Medium";
              font-weight: 500;
              color: rgba(255, 56, 62, 1);
              line-height: 16px;
              display: inline-block;
              vertical-align: bottom;
            }
          }
          .price-right {
            float: right;
            font-size: 10px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            line-height: 14px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>

